<script setup>
    import { getGoodsAPI } from '@/network/home';
    import {ref, onMounted} from 'vue'
    import HomePanel from './HomePanel.vue'

    const goodList = ref([])
    const getGoods = async () => {
       const res = await getGoodsAPI()
    //    console.log(res);
       goodList.value = res.result
    }

    onMounted(() => {
        getGoods()
    })
</script>


<template>
    <div class="home-product">
        <home-panel :title="item.name" v-for="item in goodList" :key="item.id">
            <div class="box">
                <a href="javascript:;" class="large">
                    <img v-img-lazy="item.picture" alt="">
                    <strong>
                        <span>{{item.name}}馆</span>
                        <span>{{item.saleInfo}}</span>
                    </strong>
                </a>
                <ul class="good-list">
                    <li v-for="i in item.goods" :key="i.id">
                        <goods-item :good="i"></goods-item>
                        <!-- <a href="javascript:;">
                            <img v-img-lazy="i.picture" alt="">
                            <div class="desc">
                                <p class="name">{{i.name}}</p>
                                <p class="word ellipsis">{{ i.desc }}</p>
                                <span>{{i.price}}</span>
                            </div>
                        </a> -->
                    </li>
                </ul>
            </div>
        </home-panel>
        
    </div>
</template>


<style  lang="scss">
    .home-product{
        .box{
            display: flex;
            flex-wrap: wrap;
            .large{
                position: relative;
                width: 240px;
                height: 610px;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
                strong{
                    display: flex;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                    width: 188px;
                    height: 66px;
                    line-height: 66px;
                    font-size: 18px;
                    font-weight: normal;
                    color: #fff;
                    span{
                        text-align: center;
                    }
                    span:first-child{
                        background: rgba(0, 0, 0, 0.9);
                        width: 76px;
                    }
                    span:last-child{
                        flex: 1;
                        background: rgba(0, 0, 0, 0.7);
                    }
                }
            }
            .good-list{
                display: flex;
                flex-wrap: wrap;
                width: 990px;
                li{
                    width: 240px;
                    height: 300px;
                     margin-right: 10px;
                    margin-bottom: 10px;
                    &:nth-child(4n){
                        margin-right: 0;
                    }
                    &:nth-last-child(-n + 4){
                        margin-bottom: 0;
                    }
                }
        }
            
        }
    }
</style>